<template>
  <div class="register-page">
    <div class="register-content">
      <!-- 顶部背景图和插画 -->
      <div class="register-header">
        <div class="bg-image"></div>
        <div class="back-btn" @click="$router.back()">
          <van-icon name="arrow-left" />
        </div>
        <div class="illustration">
          <img alt="register" src="@/assets/img/login.png" />
        </div>
      </div>

      <!-- 注册表单 -->
      <div class="register-form">
        <div class="form-content">
          <!-- 输入框 -->
          <div class="form-item">
            <van-field
              v-model="phone"
              :rules="[{ required: true, message: '请输入手机号' }]"
              class="custom-field"
              placeholder="请输入手机号"
              type="tel"
            >
              <template #left-icon>
                <div class="custom-icon">
                  <van-icon name="phone-o" size="20" />
                </div>
              </template>
            </van-field>
          </div>

          <div class="form-item verification">
            <van-field
              v-model="code"
              :rules="[{ required: true, message: '请输入验证码' }]"
              center
              class="custom-field"
              placeholder="请输入验证码"
            >
              <template #left-icon>
                <div class="custom-icon">
                  <van-icon name="envelop-o" size="20" />
                </div>
              </template>
              <template #button>
                <van-button
                  :disabled="!!countdown || !phone"
                  class="code-btn"
                  size="small"
                  type="primary"
                  @click="handleSendCode"
                >
                  {{ countdown ? `${countdown}s后重试` : "获取验证码" }}
                </van-button>
              </template>
            </van-field>
          </div>

          <div class="form-item">
            <van-field
              v-model="password"
              :rules="[
                { required: true, message: '请输入密码' },
                {
                  pattern: /^[a-zA-Z0-9]{8,}$/,
                  message: '密码至少8位，只能包含字母和数字',
                },
              ]"
              class="custom-field"
              placeholder="请输入密码"
              type="password"
            >
              <template #left-icon>
                <div class="custom-icon">
                  <van-icon name="lock" size="20" />
                </div>
              </template>
            </van-field>
          </div>

          <div class="form-item">
            <van-field
              v-model="confirmPassword"
              :rules="[
                { required: true, message: '请确认密码' },
                {
                  validator: validateConfirmPassword,
                  message: '两次输入的密码不一致',
                },
              ]"
              class="custom-field"
              placeholder="请确认密码"
              type="password"
            >
              <template #left-icon>
                <div class="custom-icon">
                  <van-icon name="lock" size="20" />
                </div>
              </template>
            </van-field>
          </div>

          <div class="agreement">
            <van-checkbox v-model="agreed" shape="square">
              我已阅读并同意
              <span class="link">《用户协议》</span>和
              <span class="link">《隐私政策》</span>
            </van-checkbox>
          </div>

          <!-- 注册按钮 -->
          <div class="submit">
            <van-button
              :loading="loading"
              block
              class="register-btn"
              round
              @click="handleRegister"
            >
              注册
            </van-button>
          </div>

          <div class="login-link">
            已有账号？
            <router-link to="/login">立即登录</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { message } from "@/utils/message";
import userAPI from "@/api/user";

const router = useRouter();
const phone = ref("");
const code = ref("");
const password = ref("");
const confirmPassword = ref("");
const agreed = ref(false);
const loading = ref(false);
const countdown = ref(0);

// 验证确认密码
const validateConfirmPassword = (value) => {
  return value === password.value;
};

// 发送验证码
const handleSendCode = async () => {
  if (!phone.value) {
    message.warning("请输入手机号");
    return;
  }

  try {
    await userAPI.sendRegisterCode(phone.value);
    message.success("验证码发送成功");
    // 开始倒计时
    countdown.value = 60;
    const timer = setInterval(() => {
      countdown.value--;
      if (countdown.value <= 0) {
        clearInterval(timer);
      }
    }, 1000);
  } catch (error) {
    console.error("发送验证码失败:", error);
    message.error(error.message || "发送验证码失败");
  }
};

// 注册
const handleRegister = async () => {
  // 表单验证
  if (
    !phone.value ||
    !code.value ||
    !password.value ||
    !confirmPassword.value
  ) {
    message.warning("请填写完整信息");
    return;
  }

  // 密码格式验证
  if (!/^[a-zA-Z0-9]{8,}$/.test(password.value)) {
    message.warning("密码至少8位，只能包含字母和数字");
    return;
  }

  if (password.value !== confirmPassword.value) {
    message.warning("两次输入的密码不一致");
    return;
  }

  if (!agreed.value) {
    message.warning("请同意用户协议和隐私政策");
    return;
  }

  try {
    loading.value = true;
    await userAPI.register({
      phone: phone.value,
      code: code.value,
      password: password.value,
    });
    message.success("注册成功");
    router.push("/login");
  } catch (error) {
    console.error("注册失败:", error);
    message.error(error.message || "注册失败");
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="less" scoped>
.register-page {
  min-height: 100vh;
  background: #fff;

  .register-content {
    position: relative;
    height: 100vh;
    overflow: hidden;

    .register-header {
      position: relative;
      height: 40vh;
      overflow: hidden;

      .bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #4b9eff 0%, #2c78f5 100%);
        border-radius: 0 0 30px 30px;
      }

      .back-btn {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 1;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;

        .van-icon {
          color: #fff;
          font-size: 20px;
        }
      }

      .illustration {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 240px;
        padding: 20px 0;

        img {
          width: 100%;
          height: auto;
        }
      }
    }

    .register-form {
      position: absolute;
      top: 37vh;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      border-radius: 30px 30px 0 0;
      padding: 40px 25px;

      .form-content {
        .form-item {
          margin-bottom: 16px;

          &.code-field {
            :deep(.van-field__button) {
              .code-btn {
                height: 36px;
                padding: 0 15px;
                border-radius: 18px;
                font-size: 14px;
                background: linear-gradient(135deg, #4b9eff 0%, #2c78f5 100%);
                border: none;

                &.van-button--disabled {
                  background: #e8e8e8;
                  color: #999;
                }
              }
            }
          }

          :deep(.custom-field) {
            background: #f5f7fa;
            border-radius: 25px;
            padding: 5px 15px;

            &.van-field--error,
            &.van-field--active,
            &:active,
            &:focus,
            &:focus-within {
              background: #f5f7fa !important;
            }

            input {
              background-color: transparent !important;
            }

            .van-field__left-icon {
              margin-right: 10px;
              display: flex;
              align-items: center;
              height: 36px;
            }

            .custom-icon {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 24px;
              height: 24px;
              color: #2c78f5;
            }

            .van-field__control {
              height: 36px;
              font-size: 14px;
            }
          }
        }

        .agreement {
          margin: 24px 0;
          font-size: 14px;
          color: #666;
          text-align: center;

          .link {
            color: #2c78f5;
          }

          :deep(.van-checkbox__label) {
            color: #666;
          }

          :deep(.van-checkbox) {
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        .submit {
          margin: 24px 0;

          .register-btn {
            height: 44px;
            font-size: 16px;
            font-weight: 500;
            background: linear-gradient(135deg, #4b9eff 0%, #2c78f5 100%);
            border: none;
          }
        }

        .login-link {
          text-align: center;
          font-size: 14px;
          color: #666;

          a {
            color: #2c78f5;
            text-decoration: none;
          }
        }
      }
    }
  }
}
</style>
